//首页 scss
@import "base.scss";
.index {
    min-height: 100%;
    padding: 1rem .24rem 1.5rem .24rem; 
    // 顶部
    .topBar {
        position: fixed;
        width: 100%;
        top: 0;
        left: 0;
        padding: .1rem .24rem;
        background: $c-ff;
        z-index: 99;
        .logo {
            text-align: center;
            font-family: "DaunPenh";
            color: $c-2a;
            font-size: .46rem;
            background: url("../images/index/logo.png") no-repeat;
            background-position: center;
            height: .7rem;
            background-size: 1.4rem 0.3rem;
        }
        .location {
            position: absolute;
            right: .24rem;
            top: 0;
            height: 100%;
            line-height: .9rem;
            padding-right: .3rem;
            font-family: "PingFang SC Regular";
            color: $c-33;
            font-size: .24rem;
            background: url("../../static/images/index/icon_10.png") center right no-repeat;
            background-size: .24rem .3rem;
        }
    } 

    // 产品列表
    .list {
        margin-top: .5rem;
        .title {
            .text {
                position: relative;
                font-family: "PingFang SC Bold";
                font-size: .34rem;
                color: $c-33;
                .tip {
                    position: absolute;
                    left: 100%;
                    bottom: 1px;
                    margin-left: .12rem;
                    font-family: "PingFang-SC-Medium";
                    font-size: .22rem;
                    color: $c-b1aea9;
                    font-weight: normal;
                }
            }
            .more {
                display: block;
                padding: 0 .2rem;
                background: url("../images/index/icon_9.png") center right no-repeat;
                background-size: .1rem .18rem;
                font-family: "PingFang SC regular";
                font-size: .24rem;
                color: $c-99;
                transform: translateY(0.07rem);
            }
        }
        .wrapper{
            flex-wrap: wrap;
            .card,.card2{
                width: 3.4rem;
                margin-top: .3rem;
                background: $c-fb;
                border-radius: $radius-10;
                overflow: hidden;
                font-family: $f-Medium;
                color: $c-33;
                &:nth-of-type(even){
                    margin-left: .18rem;
                }
                .pic{
                    display: block;
                    height: 2.7rem;
                }
                .bottom{
                    padding: .2rem;
                    .text{
                        flex: 1;
                        overflow: hidden;
                        font-size: .26rem;
                    }
                    .add{
                        width: .4rem;
                        height: .4rem;
                        border-radius: .2rem;
                        background: url("../../static/images/index/iocn_3.png");
                        background-size: 100% 100%;
                    }
                }
            }
            .card2{
                width: 100%;
                .pic{
                    height: 2.38rem;
                }
                .bottom {
                    padding: .24rem .2rem;
               }
            }
        }
    } 
    
    // 底部导航
    .navBar {
        @include top-border-1px($c-ef);
        position: fixed;
        padding-top: .1rem;
        bottom: 0;
        left: 0;
        width: 100%;
        min-height: .98rem;
        background: $c-ff;
        .navItem {
            display: block;
            flex: 1;
            text-align: center;
            .icon {
                margin: 0 auto;
            }
            .icon-home {
                width: .28rem;
                height: .34rem;
            }
            .icon-all,
            .icon-customer {
                width: .34rem;
                height: .34rem;
            }
            .icon-cart {
                width: .4rem;
                height: .34rem;
            }
            .icon-member {
                width: .37rem;
                height: .3rem;
            }
            .text {
                font-family: "PingFang SC Bold";
                color: $c-33;
                font-size: .22rem;
                padding-top: .1rem;
            }
        } //当前导航
        .active {
            .text {
                color: $c-ffba17;
            }
        }
    }

    //弹窗
    .size-wrapper{
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 99;
        overflow: hidden;
        visibility: hidden;
        background: rgba(0,0,0,0.2);
        opacity: 0;
        transition: all .5s;
        .content{
            padding: .66rem .2rem 1rem .2rem;
            height: 6.78rem;
            width: 100%;
            position: absolute;
            bottom: 0;
            left: 0;
            background: url("../images/index/bj.png") no-repeat;
            background-size: 100% 100%;
            animation: hide .5s;
            .top-bar{
                font-family: $f-Bold;
                font-size: .26rem;
                color: $c-33;
                font-weight: bold;
                padding: 0 .28rem .2rem .1rem;
                .close{
                    display: block;
                    width: .26rem;
                    height: .26rem;
                    background: url('../images/icon/icon_14.png') no-repeat;
                    background-size: 100%;
                }
            }
            .icon{
                z-index: 99;
                .left{
                    height: 1.7rem;
                    width: 3.31rem;
                    border-radius: $radius-10;
                    background: url("../images/index/img_7.png");
                    background-size: 100%;
                }
                .toCart{
                    z-index: 9;
                    animation: toCart 1s ease-in-out ;
                }
                .right{
                    height: 1.7rem;
                    width: 3.31rem;
                    font-family: $f-Regular;
                    font-size: .24rem;
                    color: $c-33;
                    padding: .1rem 0;
                    p{
                        padding: 0 .52rem;
                        background-position: left center;
                        background-repeat: no-repeat;
                       &:nth-child(1){
                           background-image: url("../images/icon/icon_11.png");
                           background-size: .28rem .28rem;
                       }
                       &:nth-child(2){
                        background-image: url("../images/icon/icon_13.png");
                        background-size: .22rem .30rem;
                       }
                       &:nth-child(3){
                        background-image: url("../images/icon/icon_12.png");
                        background-size: .26rem .29rem;
                      }
                    }                    
                }

            }
            .size-box{
                >div{
                    flex-wrap: wrap;
                }
                .title{
                    font-family: $f-Bold;
                    font-size: .26rem;
                    color: $c-33;
                    font-weight: bold;
                    padding:  .33rem 0;
                }
                .radio-label{
                    display: block;
                    text-align: center;
                    color: $c-33;
                    font-size: .26rem;
                    font-family: $f-Regular;
                    margin-bottom: .3rem;
                    input[type='radio']{
                        position: absolute;
                        left: -9999rem;
                    }
                    .size-checked{
                        display: block;
                        height: .65rem;
                        width: 3.35rem;
                        background: $c-fa;
                        border-radius: .32rem;
                        line-height: .65rem;
                    }
                    input[type='radio']:checked + span{
                        color: white;
                        background: $c-ffba17;
                        animation: scaleSize .5s;
                    }
                }
                .active{
                    background: $c-ffba17;
                    color: white;
                }
            }
            .bottom-bar{
                z-index: 0;
            }
            
        }
        
    }
    .show{
        visibility: visible;
        opacity: 1;
        .content{
            // animation: show 8s  ;
            animation: bounce 1s;
        }
    }
    .scaleCount{
        animation: scaleCount .5s .7s;
    }
    @keyframes show {
        0%{
            transform:  translate3d(0,100%,0) ;
        }
        50%{        
            transform:scale(0.8)  translate3d(0,-6%,0);
        }
        73%,83%,93%{
            transform: translate3d(0,-3%,0);
        }
        70%,80%,90%,100%{
            transform: none;
        }
    }
    @keyframes hide {
        to{
            transform: translate3d(0,100%,0);
        }
    }

    @keyframes bounce {
        0%{
            transform:  translate3d(0,100%,0) ;
        }
        50%{        
            transform:scale(0.8)  translate3d(0,-10%,0);
            border-radius: .1rem;
        }
        73%{
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);            
            transform: translate3d(0,-5%,0);
        }
        83%{
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);            
            transform: translate3d(0,-4%,0);
        }
        93%{
            animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);            
            transform: translate3d(0,-2%,0);
        }
        70%,80%,90%,100%{
            animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
            transform: none;
        }
    }
    @keyframes toCart {
        0%,100%{
            transform: none;
        }
        15%{
            transform: scale(0.7);
        }
        70%{
            opacity: 1;          
            transform: translate3d(-1.2rem,4.2rem,0) scale(0.2);   
        }
        83%{
            opacity: 0;
            transform: translate3d(-1.3rem,4.3rem,0) scale(0.1);               
        }
        84%{
            opacity: 0;
            transform: translate3d(0,0,0)  scale(0.5);            
        }
        85%{
            opacity: 1;
            transform: translate3d(0,0,0)  scale(0.6);
        }
       
    }
    @keyframes scaleSize{
        50%{
            transform: scale3d(1.05,1.05,1);
        }
    }
    @keyframes scaleCount {
        50%{ transform: scale3d(1.5,1.5,1)}
    }
}


